<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>test</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/static/jquery-3.5.1.min.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .frame{
            background-color: #f4f4f4;
            margin-top: 80px;
            padding: 20px;
            border-radius: 10px;
            box-shadow: darkgrey 5px 5px 20px 5px ;
        }
        .layui-elip {
            font-size: 24px;
            text-decoration: none;
            font-weight: bold;
            margin-bottom: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md4 layui-col-md-offset4 frame">
            <header class="layui-elip">登录</header>
            <form class="layui-form layui-form-pane layui-row layui-col-space30">
                <div class="layui-col-md12">
                    <div class="layui-form-item">
                        <label class="layui-form-label">账号</label>
                        <div class="layui-input-block">
                            <input type="text" id="account" class="layui-input" placeholder="请输入账号" autocomplete="off" >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="password" id="password" class="layui-input" placeholder="请输入密码" autocomplete="off" >
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">验证码</label>
                        <div class="layui-input-inline" style="width: 110px;">
                            <input type="text" id="securityCode" class="layui-input" placeholder="请输入验证码" autocomplete="off" >
                        </div>
                        <div class="layui-input-inline" style="width: 100px;">
                            <img id="securityCodeImg" alt="点击更换" title="点击更换" onclick="changeVerifyCode(this)" src="${pageContext.request.contextPath}/kaptcha"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">角色</label>
                        <div class="layui-input-block">
                            <select id="role">
                                <c:forEach items="${applicationScope.roleList}" var="a">
                                    <option value="${a.value}">${a.value}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                    <div class="layui-col-md12" style="display: flex;align-items: center;justify-content: center;">
                        <button id="loginBtn" type="button" class="layui-btn" value="登录">登录</button>
                        <button type="button" class="layui-btn layui-btn-normal" value="注册" onclick="location.href='register.jsp'">注册</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    layui.use('util', function(){
        var util = layui.util;
        //固定块
        util.fixbar({
            bar1: '&#xe65c;'
            ,css: {right: 50, bottom: 100}
            ,bgcolor: '#393D49'
            ,click: function(type){
                if(type === 'bar1'){
                    location.href='index.jsp';
                }
            }
        });
    });

    $(function (){
        $("#account").focus();

        $(window).keydown(function (event){
            if(event.keyCode === 13){
                login();
            }
        })

        $("#loginBtn").click(function (){
            login();
        });
    });
    function login(){
        var account = $.trim($("#account").val());
        var password = $.trim($("#password").val());
        var securityCode = $.trim($("#securityCode").val());
        var role = $("#role").val();

        if(account==='' || password===''){
            layer.msg("请输入用户名及密码");
            return false;
        }
        if(securityCode===''){
            layer.msg("请输入验证码");
            return false;
        }

        $.ajax({
            url: '${pageContext.request.contextPath}/login.do',
            type: 'post',
            dataType: 'json',
            data: {
                "account": account,
                "password": password,
                "securityCode": securityCode,
                "role": role
            },
            success: function (data){
                if(data.success){
                    location.href='${pageContext.request.contextPath}/index.jsp';
                }else {
                    $("#securityCodeImg").attr("src","${pageContext.request.contextPath}/kaptcha?" + Math.floor(Math.random()*100));
                    layer.msg("登录失败，"+data.msg);
                }
            }
        })
    }

    function changeVerifyCode(img){
        img.src="${pageContext.request.contextPath}/kaptcha?" + Math.floor(Math.random()*100);
    }
</script>
</body>
</html>